<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- <title></title> -->
	<style>


		/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
		::-webkit-scrollbar{
			width: 5px;
			height: 5px;
			background-color: #F5F5F5;
		}

		/*定义滚动条轨道 内阴影+圆角*/
		::-webkit-scrollbar-track {
			box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
			border-radius: 10px;
			background-color: #F5F5F5;
		}

		/*定义滑块 内阴影+圆角*/
		::-webkit-scrollbar-thumb{
			border-radius: 10px;
			box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
			/*滚动条的颜色*/
			background-color:#00BFFF;
		}





		html,body{
			width: 100%;
			height: 100%;
		}
		*{
			padding: 0;
			margin: 0;
		}
		.preview_main_page{
			display: flex;
			width:100%;
			height:100%;
			flex-direction:column;
		}
		/*场景状态与测试数据*/
		.preview_main_page_top{
			height:30px;
			min-height:30px;
			/* height:5%;
			min-height: 48px; */
			display: flex;
			/* background: #0a8eff; */
			justify-content: space-between;
		}
		.preview_main_page_top .message{
			font-size: 15px;
			line-height:20px
		}
		
		.preview_main_page_top_center{
			height:30px;
			line-height:30px;
			flex-grow:1;
			background-color:transparent;
			/* padding:6px; */
			text-align:left;
			font-size:16px;
			color:red;
			position:fixed;
			left:40px;
			top:4px;
			z-index:10;
		}
		
		.preview_main_page_top_right{
			height:100%;
			width:8%;
			background: #222c46;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		/*场景部分*/
		.preview_main_page_center{
			height:100%;
			flex-grow:1;
			display: flex;
			flex-direction:column;
			justify-content:center;
			align-items: center;
			overflow:hidden;
		}
		
		#full{
			margin:8px;
		}
	</style>
	<!--图标库-->
	<link rel="stylesheet" href="css/font/localFont.css">
	<link rel="stylesheet" href="css/plugIn/font-awesome-4.7.0/css/font-awesome.min.css">
	<!--layui框架-->
	<link rel="stylesheet" href="js/plugIn/layui-master/src/css/layui.css">
	<script src="js/plugIn/jquery/jquery.min.js"></script><!--jquery 要在layui之前，这样layui就不会加载内部的jquery-->
	<script src="js/plugIn/layui-master/src/layui.js"></script>
	<!--konva 7.4 konva 7.5 元素不能有阴影，如果有阴影，元素超过10个，移动特别慢   ，5.3版本的没有问题   .-->
	<script src="js/plugIn/konva-master/konva.min.js"></script>
	<script src="js/plugIn/konva-master/gifler.min.js"></script>
	<script src="js/plugIn/echart5.3.2/echarts.min.js"></script>
	<script src="js/plugIn/echart5.3.2/echarts-liquidfill.min.js"></script>
	<script src="js/plugIn/konva-master/gifler.min.js"></script>
	<script src="config/echart/echartOption.js"></script>
	<script src="js/common/tool.js"></script>

	<script src="js/ModuleAnimation.js"></script>
	<script src="js/StageView.js"></script>
	<script src="js/preview_preview.js"></script>
</head>
<body  id="top1_container">
<div  id="top2_container" style="" class="preview_main_page">
	<div class="preview_main_page_top" style = "margin: auto;position: absolute;z-index: 999;width: 100%">
		<i id="full" class="layui-icon layui-icon-screen-full" style="cursor:pointer;font-size: 20px; color: #1E9FFF;" title="全屏/退出全屏"></i>
		<div class="preview_main_page_top_center">
			预览模式下未连接实时数据
			<!-- <textarea id="stageDatajson" style="width: calc(100% - 5px);height: calc(100% - 5px);margin: 2px">{a03:0,a04:98,a01:8}</textarea> -->
		</div>
		<!-- <div style="width: 100%">
			<textarea id="stageDatajson" style="background: rgba(255,255,255,0.8);width: calc(100% - 2px);margin: 0px;height: 20px;">{a03:0,a04:98,a01:8}</textarea>
		</div>
		<div>
			<div class="layui-btn-group" style="width: 100%;">
				<button style="width: 100%;height: 100%;line-height: 22px" onclick="sendtestData()" class="layui-btn layui-btn-normal">发送测试数据</button>
			</div>
		</div> -->
	</div>
	<div id="stageBackground" style = "width: 100%;height: 100%;margin: auto;position: absolute;z-index: 0">
	</div>
	<div id="container_parent" class="preview_main_page_center">
		<!--<div id="container" style = "position: relative; margin: auto;border:1px solid rgb(151 206 222);background-color: #ffffff;"></div>-->
		<div id="container" style = "position:relative;border:1px solid rgba(151 ,206 ,222, 0.1);"></div>
	</div>
</div>
</body>
</html>
